<script setup>
import {ref, reactive, computed, onMounted} from 'vue'
import {
  batchUpdateOperationLogStatus,
  getDepartments,
  getOperationLogs,
  deleteOperationLog, updateOperationLog, batchDeleteOperationLogs
} from '@/api/work.js'
import sider from './ReviewSider.vue'
import heade from './ReviewHeader.vue'
import timeselect from './ReviewTimeSelect.vue'

// 操作日志数据
const operationLogs = reactive([])
const loading = ref(false)

// 获取操作日志数据
const fetchOperationLogs = async () => {
  try {
    loading.value = true
    const response = await getOperationLogs()
    if (response.data.code === 1) {
      operationLogs.length = 0
      // 正确：取 data.records 中的列表数据（后端返回的核心日志数组）
      const logList = response.data.data?.records || []
      if (Array.isArray(logList) && logList.length > 0) {
        operationLogs.push(...logList)
        console.log('成功存入日志数据：', operationLogs) // 可验证
      }
    }
  } catch (error) {
    console.error('获取操作日志失败:', error)
  } finally {
    loading.value = false
  }
}

// 组件挂载时获取数据
onMounted(() => {
  fetchOperationLogs()
})

// 批量管理状态
const isBatchMode = ref(false)
const selectedLogIds = ref([])
const input = ref('')
const dateRange = ref([])
const selectedDept = ref('all')
// 当前选中的日志
const selectedLog = ref(null)
const isEditingLog = ref(false)
const editingLog = reactive({})
// 详情弹窗显示状态
const showDetailModal = ref(false)
// 切换批量管理模式
const toggleBatchMode = () => {
  isBatchMode.value = !isBatchMode.value
  selectedLogIds.value = []
}
// 全选/取消全选
const handleSelectAll = () => {
  if (selectedLogIds.value.length === filteredOperationLogs.value.length) {
    selectedLogIds.value = []
  } else {
    selectedLogIds.value = filteredOperationLogs.value.map(log => log.id)
  }
}
// 切换单个日志选中状态
const toggleLogSelection = (logId) => {
  const index = selectedLogIds.value.indexOf(logId)
  if (index > -1) {
    selectedLogIds.value.splice(index, 1)
  } else {
    selectedLogIds.value.push(logId)
  }
}
// 批量删除
const batchDelete = async () => {
  if (selectedLogIds.value.length === 0) return
  if (confirm(`确定要删除选中的 ${selectedLogIds.value.length} 条记录吗？`)) {
    try {
      loading.value = true
      await batchDeleteOperationLogs(selectedLogIds.value)
      // 重新获取数据
      await fetchOperationLogs()
      selectedLogIds.value = []
      isBatchMode.value = false
    } catch (error) {
      console.error('批量删除失败:', error)
    } finally {
      loading.value = false
    }
  }
}
// 批量修改状态
const batchUpdateStatus = async (newStatus) => {
  if (selectedLogIds.value.length === 0) return
  try {
    loading.value = true
    await batchUpdateOperationLogStatus(selectedLogIds.value, newStatus)
    // 重新获取数据
    await fetchOperationLogs()
    selectedLogIds.value = []
    isBatchMode.value = false
  } catch (error) {
    console.error('批量更新状态失败:', error)
  } finally {
    loading.value = false
  }
}
// 单个删除
const deleteLog = async (logId) => {
  if (confirm('确定要删除这条记录吗？')) {
    try {
      loading.value = true
      await deleteOperationLog(logId)
      // 重新获取数据
      await fetchOperationLogs()
      if (selectedLog.value?.id === logId) {
        selectedLog.value = null
      }
    } catch (error) {
      console.error('删除记录失败:', error)
    } finally {
      loading.value = false
    }
  }
}
// 查看日志详情
const viewLogDetail = (log) => {
  if (!isBatchMode.value) {
    selectedLog.value = log
    Object.assign(editingLog, log)
    showDetailModal.value = true
  }
}
// 关闭详情弹窗
const closeDetailModal = () => {
  showDetailModal.value = false
  selectedLog.value = null
}
// 编辑日志
const editLog = () => {
  isEditingLog.value = true
}
// 保存日志修改
const saveLog = async () => {
  try {
    loading.value = true
    await updateOperationLog(editingLog.id, editingLog)
    // 重新获取数据
    await fetchOperationLogs()
    isEditingLog.value = false
  } catch (error) {
    console.error('保存日志修改失败:', error)
  } finally {
    loading.value = false
  }
}
// 取消编辑
const cancelEdit = () => {
  isEditingLog.value = false
  Object.assign(editingLog, selectedLog.value)
}

// 部门过滤
const handleDeptFilter = (event) => {
  selectedDept.value = event.target.value
}

// 格式化时间
const formatDateTime = (dateTimeStr) => {
  if (!dateTimeStr) return '未知'
  try {
    const date = new Date(dateTimeStr)
    if (isNaN(date.getTime())) return dateTimeStr
    
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    const seconds = String(date.getSeconds()).padStart(2, '0')
    
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
  } catch {
    return dateTimeStr
  }
}

// 获取唯一的部门列表
const departmentList = computed(() => {
  const departments = operationLogs.map(log => log.dep).filter(Boolean)
  return ['all', ...new Set(departments)]
})

// 筛选后的操作日志
const filteredOperationLogs = computed(() => {
  let filtered = [...operationLogs]

  // 按部门筛选（使用 dep 字段）
  if (selectedDept.value !== 'all') {
    filtered = filtered.filter(log => log.dep === selectedDept.value)
  }

  // 按输入内容筛选
  if (input.value.trim()) {
    const searchTerm = input.value.toLowerCase()
    filtered = filtered.filter(log =>
      log.target?.toLowerCase().includes(searchTerm) ||
      log.operator?.toLowerCase().includes(searchTerm) ||
      log.staff?.toLowerCase().includes(searchTerm)
    )
  }

  // 按日期范围筛选
  if (dateRange.value && dateRange.value.length === 2) {
    const [startDate, endDate] = dateRange.value
    filtered = filtered.filter(log => {
      const logDate = new Date(log.time)
      return logDate >= startDate && logDate <= endDate
    })
  }

  return filtered
})
</script>
<template>
  <div class="admin-layout">
    <!-- 顶栏 -->
    <div class = topbar>
      <heade/>
    </div>
    <!-- 侧边栏 -->
    <div class = sidebar>
      <div class = sidebar-menu>
        <sider/>
      </div>
    </div>
    <!-- 主内容区容器 -->
    <div class="content-wrapper">
      <div class="main-content">
        <div class="content-section">
          <div class = "section-header">
            <h3>操作日志</h3>
            <!--头部栏-->
            <div class="header-actions">
              <div class = "filter-buttons">
                <!-- 批量管理按钮 -->
                <button class="filter-btn" :class="{ active: isBatchMode }" @click="toggleBatchMode">
                  {{ isBatchMode ? '退出批量' : '批量管理' }}
                </button>
                <!-- 批量操作按钮 -->
                <template v-if="isBatchMode && selectedLogIds.length > 0">
                  <button class="filter-btn batch-btn delete-btn" @click="batchDelete">
                    删除 ({{ selectedLogIds.length }})
                  </button>
                </template>
                <!-- 全选框 -->
                <label v-if="isBatchMode" class="select-all-label">
                  <input
                    type="checkbox"
                    :checked="selectedLogIds.length === operationLogs.length && operationLogs.length > 0"
                    @change="handleSelectAll"
                  >
                  全选
                </label>
                <select v-model="selectedDept" @change="handleDeptFilter" class="dept-select" style="height: 30px">
                  <option v-for="dept in departmentList" :key="dept" :value="dept">
                    {{ dept === 'all' ? '全部部门' : dept }}
                  </option>
                </select>
                <el-input v-model="input" style="width: 240px;height: 30px" placeholder="请输入员工姓名/工号" />
                <timeselect v-model="dateRange"/>
              </div>
            </div>
          </div>
          <!--列表主体-->
          <div class="work-list">
            <div class="work-item" :class="{ 'loading': loading }">
              <div v-if="loading" class="loading-mask">
                <div class="loading-spinner"></div>
              </div>
              <div v-else>
                <div
                  v-for="log in filteredOperationLogs"
                  :key="log.id"
                  class="log-item"
                  :class="{
	            active: selectedLog?.id === log.id && !isBatchMode,
	            selected: selectedLogIds.includes(log.id)
	          }"
                  @click="viewLogDetail(log)"
                >
                  <!-- 批量选择框 -->
                  <div v-if="isBatchMode" class="batch-checkbox" @click.stop>
                    <input
                      type="checkbox"
                      :checked="selectedLogIds.includes(log.id)"
                      @change="toggleLogSelection(log.id)"
                    >
                  </div>
                  <div class="log-content">
                    <div class="log-header">
	              <span class="log-action" :class="{
	                'approved': log.action === '审批通过',
	                'rejected': log.action === '审批驳回'
	              }">{{ log.action }}</span>
                      <span class="log-time">{{ formatDateTime(log.time) }}</span>
                    </div>
                    <p class="log-target">目标：{{ log.dir }}</p>
                    <p class="log-operator">部门：{{ log.dep || '未知' }}</p>
                    <p class="log-operator">项目id：{{ log.applyid }}</p>
                    <p class="log-operator">批语：{{ log.remark }}</p>
                    <p class="log-operator">负责人：{{ log.staff }}</p>
                    <p class="log-operator">创建时间：{{ formatDateTime(log.createTime) }}</p>
                  </div>
                  <!-- 单个操作按钮 -->
                  <div v-if="!isBatchMode" class="log-actions">
                    <button class="action-btn view-btn" @click.stop="viewLogDetail(log)">查看详情</button>
                    <button class="action-btn delete-btn" @click.stop="deleteLog(log.id)">删除</button>
                  </div>
                </div>
                <div v-if="filteredOperationLogs.length === 0" class="empty-state">
                  <div class="empty-icon">📋</div>
                  <p>暂无日志记录</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 主内容区 -->
    </div>

    <!-- 日志详情弹窗 -->
    <div v-if="showDetailModal" class="detail-modal" @click.self="closeDetailModal">
      <div class="detail-modal-content">
        <div class="detail-modal-header">
          <h3>日志详情</h3>
          <button class="close-btn" @click="closeDetailModal">&times;</button>
        </div>
        <div class="detail-modal-body">
          <div class="detail-section">
            <h4>基本信息</h4>
            <div class="detail-info">
              <div class="info-row">
                <span class="info-label">操作类型：</span>
                <span class="info-value" :class="{
                  'approved': selectedLog?.action === '审批通过',
                  'rejected': selectedLog?.action === '审批驳回'
                }">{{ selectedLog?.action }}</span>
              </div>
              <div class="info-row">
                <span class="info-label">操作时间：</span>
                <span class="info-value">{{ formatDateTime(selectedLog?.time) }}</span>
              </div>
              <div class="info-row">
                <span class="info-label">创建时间：</span>
                <span class="info-value">{{ formatDateTime(selectedLog?.createTime) }}</span>
              </div>
              <div class="info-row">
                <span class="info-label">目标：</span>
                <span class="info-value">{{ selectedLog?.dir }}</span>
              </div>
              <div class="info-row">
                <span class="info-label">部门：</span>
                <span class="info-value">{{ selectedLog?.dep || '未知' }}</span>
              </div>
              <div class="info-row">
                <span class="info-label">项目ID：</span>
                <span class="info-value">{{ selectedLog?.applyid }}</span>
              </div>
              <div class="info-row">
                <span class="info-label">负责人：</span>
                <span class="info-value">{{ selectedLog?.staff }}</span>
              </div>
            </div>
          </div>
          <div class="detail-section">
            <h4>审批评语</h4>
            <div class="remark-content">
              {{ selectedLog?.remark || '无评语' }}
            </div>
          </div>
        </div>
        <div class="detail-modal-footer">
          <button class="btn-close" @click="closeDetailModal">关闭</button>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
/* --- 总体布局 --- */
.admin-layout {
  display: flex;
  height: 100vh;
  background: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.content-wrapper {
  margin-top: 50px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* --- 侧边栏样式 --- */
.sidebar {
  width: 260px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}
.sidebar-header {
  padding: 30px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sidebar-header h2 { margin: 0 0 5px 0; font-size: 20px; font-weight: 600; }
.sidebar-header p { margin: 0; font-size: 14px; opacity: 0.8; }
.sidebar-menu { flex: 1; padding: 20px 0; }
.menu-item { display: flex; align-items: center; padding: 15px 25px; cursor: pointer; transition: all 0.3s ease; border-left: 3px solid transparent; }
.menu-item:hover { background: rgba(255,255,255,0.1); }
.menu-item.active { background: rgba(255,255,255,0.2); border-left-color: white; }
.menu-icon { font-size: 20px; margin-right: 15px; width: 25px; text-align: center; }
.menu-text { font-size: 15px; font-weight: 500; }
/* --- 顶栏样式 --- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 0 30px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  z-index: 10;
}
.breadcrumb {
  font-size: 18px;
  font-weight: 500;
  color: #333;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 15px;
}
.username {
  font-size: 15px;
  color: #555;
}
.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.user-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.avatar-text {
  color: white;
  font-weight: 600;
  font-size: 16px;
}
/* --- 主内容区样式 --- */
.main-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}
.content-section {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 30px;
  border-bottom: 1px solid #e8e8e8;
}
.section-header h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: #333;
}
/* --- 工作列表样式 --- */
.filter-buttons { display: flex; gap: 10px; align-items: center; }
.filter-btn {
  padding: 8px 16px;
  border: 1px solid #d9d9d9;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}
.filter-btn:hover { border-color: #667eea; color: #667eea; }
.filter-btn.active { background: #667eea; border-color: #667eea; color: white; }
.filter-btn.batch-btn {
  margin-left: 10px;
}
.filter-btn.delete-btn:hover {
  border-color: #ff4d4f;
  color: #ff4d4f;
}
.filter-btn.approve-btn:hover {
  border-color: #52c41a;
  color: #52c41a;
}
.filter-btn.reject-btn:hover {
  border-color: #faad14;
  color: #faad14;
}
.dept-select {
  padding: 6px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  background: white;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.dept-select:hover {
  border-color: #667eea;
}
.dept-select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}
.select-all-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  margin-left: 10px;
}
.work-list { padding: 20px 30px; overflow-y: auto; }
.work-item {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 15px;
  transition: all 0.3s ease;
  border: 1px solid #e8e8e8;
}
.work-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-2px); }
.work-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.work-item-header h4 { margin: 0; font-size: 16px; color: #333; }
.status-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}
.status-badge.pending { background: #fff3cd; color: #856404; }
.status-badge.approved { background: #d4edda; color: #155724; }
.status-badge.rejected { background: #f8d7da; color: #721c24; }
.work-item-info { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 15px; }
.work-item-info p { margin: 0; font-size: 14px; color: #666; }
.priority { font-weight: 500; }
.priority.high { color: #e74c3c; }
.priority.medium { color: #f39c12; }
.priority.low { color: #27ae60; }
.work-item-actions { display: flex; gap: 10px; }
.btn-approve, .btn-reject {
  padding: 8px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}
.btn-approve { background: #28a745; color: white; }
.btn-approve:hover { background: #218838; }
.btn-reject { background: #dc3545; color: white; }
.btn-reject:hover { background: #c82333; }
/* --- 操作日志样式 --- */
.logs-container { display: flex; height: 100%; }
.logs-list { width: 40%; border-right: 1px solid #e8e8e8; overflow-y: auto; }
.log-item {
  padding: 20px 30px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 15px;
  position: relative;
}
.log-item:hover { background: #f8f9fa; }
.log-item.active { background: #e8f4fd; border-left: 3px solid #1890ff; }
.log-item.selected { background: #f0f9ff; }
.log-item.selected::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #1890ff;
}
.batch-checkbox {
  flex-shrink: 0;
}
.batch-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.log-content {
  flex: 1;
  min-width: 0;
}
.log-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.log-action {
  font-weight: 500;
  color: #1890ff;
}
.log-action.approved {
  color: #52c41a;
}
.log-action.rejected {
  color: #ff4d4f;
}
.log-time { font-size: 12px; color: #999; }
.log-target { margin: 0; font-size: 14px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log-operator { margin: 0; font-size: 14px; color: #666; }
.log-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.action-btn {
  padding: 4px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s ease;
}
.action-btn.view-btn {
  background: #1890ff;
  color: white;
}
.action-btn.view-btn:hover {
  background: #40a9ff;
}
.action-btn.edit-btn {
  background: #1890ff;
  color: white;
}
.action-btn.edit-btn:hover {
  background: #40a9ff;
}
.action-btn.delete-btn {
  background: #ff4d4f;
  color: white;
}
.action-btn.delete-btn:hover {
  background: #ff7875;
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}
.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}
.empty-state p {
  margin: 0;
  color: #999;
  font-size: 16px;
}
.log-detail { flex: 1; padding: 30px; overflow-y: auto; }
.detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid #e8e8e8; }
.detail-header h4 { margin: 0; font-size: 18px; color: #333; }
.btn-edit { padding: 8px 16px; background: #1890ff; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; }
.btn-save { padding: 8px 16px; background: #52c41a; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; margin-right: 10px; }
.btn-cancel { padding: 8px 16px; background: #d9d9d9; color: #666; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; }
.detail-content { display: flex; flex-direction: column; gap: 15px; }
.detail-row { display: flex; align-items: flex-start; }
.detail-row label { width: 100px; font-weight: 500; color: #333; margin-right: 15px; }
.detail-row input,
.detail-row textarea { flex: 1; padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 6px; font-size: 14px; }
.detail-row textarea { min-height: 80px; resize: vertical; }
/* --- 私信样式 --- */
.messages-container { display: flex; height: 100%; }
.messages-list { width: 35%; border-right: 1px solid #e8e8e8; overflow-y: auto; }
.message-item { padding: 20px 30px; border-bottom: 1px solid #f0f0f0; cursor: pointer; transition: all 0.3s ease; position: relative; }
.message-item:hover { background: #f8f9fa; }
.message-item.active { background: #e8f4fd; border-left: 3px solid #1890ff; }
.message-item.unread { background: #f0f9ff; }
.message-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.message-sender { font-weight: 500; color: #333; }
.message-time { font-size: 12px; color: #999; }
.message-preview { margin: 0; font-size: 14px; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unread-dot { position: absolute; top: 20px; right: 20px; width: 8px; height: 8px; background: #ff4d4f; border-radius: 50%; }
.chat-window { flex: 1; display: flex; flex-direction: column; }
.chat-header { padding: 20px 30px; border-bottom: 1px solid #e8e8e8; }
.chat-header h4 { margin: 0; font-size: 18px; color: #333; }
.chat-messages { flex: 1; padding: 20px 30px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; }
.chat-message { display: flex; flex-direction: column; max-width: 70%; }
.chat-message.sent { align-self: flex-end; }
.chat-message.received { align-self: flex-start; }
.message-content { padding: 10px 15px; border-radius: 12px; font-size: 14px; line-height: 1.4; }
.chat-message.sent .message-content { background: #1890ff; color: white; }
.chat-message.received .message-content { background: #f0f0f0; color: #333; }
.chat-message .message-time { font-size: 12px; color: #999; margin-top: 5px; align-self: flex-end; }
.chat-message.received .message-time { align-self: flex-start; }
.chat-input { padding: 20px 30px; border-top: 1px solid #e8e8e8; display: flex; gap: 10px; }
.chat-input input { flex: 1; padding: 10px 15px; border: 1px solid #d9d9d9; border-radius: 6px; font-size: 14px; }
.chat-input button { padding: 10px 25px; background: #1890ff; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500; }
.chat-input button:hover { background: #40a9ff; }
/* --- 个人中心模态框样式 --- */
.profile-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.profile-content {
  background: #fff;
  padding: 0;
  border-radius: 12px;
  width: 400px;
  box-shadow: 0 5px 25px rgba(0,0,0,0.2);
  animation: modalFadeIn 0.3s ease-out;
}
@keyframes modalFadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  border-bottom: 1px solid #e8e8e8;
}
.profile-header h3 { margin: 0; font-size: 18px; color: #333; }
.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: #aaa;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  width: 30px;
  height: 30px;
}
.close-btn:hover { color: #333; }
.profile-body { padding: 30px; text-align: center; }
.profile-avatar-large {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.profile-avatar-large .avatar-text {
  color: white;
  font-weight: 600;
  font-size: 36px;
}
.profile-info h4 { margin: 0 0 10px 0; font-size: 20px; color: #333; }
.profile-info p { margin: 5px 0; color: #666; font-size: 14px; }
.profile-actions {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.profile-btn {
  padding: 12px 20px;
  border: 1px solid #d9d9d9;
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  transition: all 0.3s ease;
}
.profile-btn:hover {
  background-color: #f5f5f5;
  border-color: #667eea;
  color: #667eea;
}
.profile-btn.logout {
  color: #e74c3c;
  border-color: #f8d7da;
}
.profile-btn.logout:hover {
  background-color: #f8d7da;
  border-color: #e74c3c;
}

/* --- 详情弹窗样式 --- */
.detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.detail-modal-content {
  background: #fff;
  border-radius: 12px;
  width: 700px;
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
  animation: modalFadeIn 0.3s ease-out;
}

.detail-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  border-bottom: 1px solid #e8e8e8;
}

.detail-modal-header h3 {
  margin: 0;
  font-size: 20px;
  color: #333;
  font-weight: 600;
}

.detail-modal-body {
  padding: 30px;
}

.detail-section {
  margin-bottom: 25px;
}

.detail-section:last-child {
  margin-bottom: 0;
}

.detail-section h4 {
  margin: 0 0 15px 0;
  font-size: 16px;
  color: #333;
  font-weight: 600;
  padding-bottom: 10px;
  border-bottom: 2px solid #f0f0f0;
}

.detail-info {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
}

.info-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
  line-height: 1.6;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-label {
  font-weight: 500;
  color: #666;
  min-width: 100px;
  flex-shrink: 0;
}

.info-value {
  color: #333;
  flex: 1;
  word-break: break-all;
}

.info-value.approved {
  color: #52c41a;
  font-weight: 500;
}

.info-value.rejected {
  color: #ff4d4f;
  font-weight: 500;
}

.remark-content {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  color: #333;
  line-height: 1.8;
  min-height: 80px;
  white-space: pre-wrap;
  word-break: break-word;
}

.detail-modal-footer {
  padding: 15px 30px;
  border-top: 1px solid #e8e8e8;
  display: flex;
  justify-content: flex-end;
}

.btn-close {
  padding: 10px 24px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-close:hover {
  background: #5567d8;
}
</style>
